<template>
  <div class="theme-detail">
		<header>
			<img class="ximg-demo" :src="themeData.image" alt="">
			<i class="icon iconfont icon-back" @click="showSidebar"></i>
			<span class="title">{{themeData.name}}</span>
			<!-- jian 图标 jia 图标 -->
			<i class="icon iconfont icon-jia"></i>
		</header>
		<div class="theme-scroll">
			<scroller ref="listScroll"
			class="nav-menu"
			:probe-type="2"
			:listen-scroll="listenScroll"
			:data="stories">
				<div>
					<div class="editors vux-1px-b" @click="openEditorPage">
						<span class="text">主编</span>
						<img class="ximg-demo" v-for="(item, index) in themeData.editors" :key="index" v-lazy="item.avatar" alt="">
						<i class="icon iconfont icon-more"></i>
					</div>
					<news-list :data="stories"></news-list>
				</div>
			</scroller>
		</div>
	</div>
</template>
<script>
import { TransferDomDirective as TransferDom } from "vux";
import axios from "axios";
import Scroller from "components/scroller/scroller";
import NewsList from "components/newsList/newsList";
import { mapMutations } from "vuex";
export default {
  directives: {
    TransferDom
  },
  data() {
    return {
      themeData: {},
      stories: []
    };
  },
  created() {
    this.listenScroll = true;
    this.getThemeData();
  },
  mounted() {
    setTimeout(() => {
      this.$refs.listScroll.refresh();
    }, 20);
  },
  watch: {
    // 监听路由变化，重新获取主题列表数据
    $route: "getThemeData"
  },
  methods: {
    // 获取主题列表数据
    getThemeData() {
      this.$vux.loading.show({ text: "加载中..." });
      axios.get("api/theme/" + this.$route.params.id).then(res => {
        this.themeData = res.data;
        this.stories = res.data.stories;
        let ids = res.data.stories.map(item => item.id);
        this.addStoriesId({type: 'init', ids: ids});// 保存所有新闻的ID
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 100);
      });
    },
    // 打开编辑人员列表页面
    openEditorPage() {
      this.$router.push({
        name: "editorList",
        params: { id: this.$route.params.id }
      });
    },
    // 点击打开侧边栏
    showSidebar() {
      this.changeSidebarStatu(true);
    },
    ...mapMutations({
      changeSidebarStatu: "CHANGE_SIDEBAR_STATU",
      addStoriesId: 'ADD_STORIES_ID'
    })
  },
  components: {
    Scroller,
    NewsList
  }
};
</script>
<style lang="less" scoped>
.editor-view {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 5002;
	background-color: #fff;
}
.theme-detail {
  header {
    position: fixed;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    z-index: 1;
    img {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      z-index: -1;
      filter: blur(2px);
    }
    .icon {
      font-size: 24px;
      margin: 0 10px;
    }
    .icon-back {
      float: left;
    }
    .icon-jian,
    .icon-jia {
      float: right;
    }
  }
  .theme-scroll {
    position: absolute;
    width: 100%;
    top: 44px;
    bottom: 0;
    left: 0;
    .nav-menu {
      height: 100%;
      .editors {
        height: 45px;
        line-height: 45px;
        padding: 0 15px;
        color: #585858;
        overflow: hidden;
        img {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          vertical-align: middle;
          margin-left: 15px;
        }
        .icon {
          float: right;
        }
      }
    }
  }
}
</style>
